@import 'restyle';

$primary-border-color: get-color(gray3, 0.8);
$secondary-border-color: get-color(slate0);

/// Defines styles for the breadcrumb container
@include restyle-define(
  breadcrumbs,
  (
    restyle-var(primary-border-color): $primary-border-color,
    restyle-var(secondary-border-color): $secondary-border-color,
    background-color: transparent,
    list-style-type: none,
    overflow: hidden,
    padding: 0,
    margin: 5px 0,
    height: 41px,
    restyle-modifiers: (
      'with a border': (
        border: 1px solid restyle-var(primary-border-color)
      )
    )
  )
);

@include restyle-define(
  grain-text,
  (
    max-width: 120px,
    overflow: hidden,
    text-overflow: ellipsis,
    white-space: nowrap,
    display: block
  )
);

@include restyle-define(
  grain,
  (
    restyle-var(primary-border-color): $primary-border-color,
    restyle-var(secondary-border-color): $secondary-border-color,
    float: left,
    display: block,
    position: relative,
    padding: 10px 0 10px 45px,
    '&::before': (
      content: ' ',
      display: block,
      width: 0,
      height: 0,
      border-top: 50px solid transparent,
      border-bottom: 50px solid transparent,
      border-left: 30px solid restyle-var(primary-border-color),
      position: absolute,
      top: 50%,
      margin-top: -50px,
      left: 102%
    ),
    '&::after': (
      content: ' ',
      display: block,
      width: 0,
      height: 0,
      border-top: 50px solid transparent,
      border-bottom: 50px solid transparent,
      border-left: 30px solid restyle-var(secondary-border-color),
      position: absolute,
      top: 50%,
      margin-top: -50px,
      left: 101%
    )
  )
);

.nacho-breadcrumbs {
  @include restyle(breadcrumbs);

  &--white-surface {
    $secondary-border-color: get-color(white);

    .nacho-breadcrumbs__crumb__grain {
      &--no-focus {
        outline: none;
      }

      &::after {
        border-left: 30px solid $secondary-border-color;
      }
    }
  }

  &__crumb {
    float: left;

    &__grain {
      @include restyle(grain);
    }

    &__text {
      @include restyle(grain-text);
    }

    &:first-child &__grain {
      padding-left: 0;
    }

    &:last-child &__grain {
      cursor: default;
      pointer-events: none;
      color: inherit;
      &::after,
      &::before {
        border: 0;
      }
    }
  }
}
